<template>
  <!--  写模板的地方-->
  <div class="demo">
    <h2>学校名称:{{ name }}</h2>
    <h2 class="cty">学校地址:{{ address }}</h2>
    <button @click="sendAppSchoolName">点我给App发送学校名字</button>
  </div>
</template>

<script>
//写数据、方法。。。。的地方

//默认暴露 用时只需要 import 名字 from 文件 就行了
export default {
  //给这个模块配置名字
  name: 'vue-school',
  data() {
    return {
      name: '尚硅谷',
      address: '北京昌平'
    }
  },
  props:['sendSchoolName'],
  methods:{
    sendAppSchoolName() {
      this.sendSchoolName(this.name);
    }
  }
}
</script>


<style scoped lang="css">
/* scoped 可以让样式在自己的作用域中 可以解决class类名的冲突 */
/* lang可以写样的语法样式 比如css(默认) less sass*/
/*写样式的地方*/
.demo {
  background-color: orange;
}

.cty {
  font-size: 40px;
}

</style>